<template>
    <view class="content">
        <!-- 帖子类型区域 -->
        <view class="card type-card">
            <view class="type-title">任务类型</view>
            <up-radio-group v-model="run.typeId" direction="row" active-color="#07c160" class="type-group">
                <up-radio :name="'0'" :label="'取快递'" class="type-item"></up-radio>
                <up-radio :name="'1'" :label="'求帮忙'" class="type-item"></up-radio>
            </up-radio-group>
        </view>

        <!-- 详细信息区域 -->
        <view class="card">
            <up-form :model="run" class="form-section">
                <up-form-item label="内容" prop="content" :borderBottom="false" class="form-item">
                    <textarea 
                        v-model="run.runDescribe" 
                        placeholder="输入你的跑腿需求，如：帮取3个包裹、代买特定物品等" 
                        class="content-input"
                        auto-height
                    ></textarea>
                </up-form-item>
            </up-form>
        </view>

        <!-- 截止时间选择 -->
        <view class="card">
            <up-form>
                <up-form-item label="截止时间" prop="deadline" class="form-item">
                    <u-datetime-picker
                        :show="show"
                        v-model="tempDeadline"
                        type="datetime"
                        placeholder="选择截止时间"
                        class="deadline-picker"
                        :startDate="minDate" 
                        @confirm="changeHand"
                        @cancel="show = false"
                    ></u-datetime-picker>
                    <up-button @click="show = true" type="primary" class="deadline-btn">
                        {{ run.deadline ? (run.deadline + '').replace('T', ' ').slice(0, 16) : '选择时间' }}
                    </up-button>
                </up-form-item>
            </up-form>
        </view>

        <!-- 签收地址区域 -->
        <view class="card">
            <up-form class="form-section address-section">
                <up-form-item label="送达地址" class="form-item">
                    <up-input v-model="run.endaddress" placeholder="如：XX栋XX单元XX室、XX商铺" class="address-input" />
                </up-form-item>
                <up-button type="text" color="#07c160" @click="handleHistory" class="history-btn">
                    历史记录
                </up-button>
            </up-form>
        </view>

        <!-- 仅接单员可见区域 -->
        <view class="card">
            <up-form :model="run" class="form-section private-section">
                <up-form-item label="取件码" prop="code" class="form-item">
                    <up-input v-model="run.code" placeholder="如：123456" class="private-input" />
                </up-form-item>
                <up-form-item label="手机尾号" prop="phoneEnd" class="form-item">
                    <up-input v-model="run.phoneEnd" type="digit" maxLength="4" placeholder="如：1234"
                        class="private-input" />
                </up-form-item>
                <up-form-item label="备注" prop="remark" class="form-item">
                    <up-input v-model="run.remark" placeholder="如：放门口鞋柜、优先上午取" class="private-input" />
                </up-form-item>
            </up-form>
        </view>

        <!-- 赏金区域 -->
        <view class="card price-container">
            <text class="price-title">赏金</text>
            <text class="price-desc">底价2元，赏金越多接单越快~</text>
            <up-grid :column-num="5" :border="false" class="price-grid">
                <up-grid-item v-for="(item, index) in priceOptions" :key="index" :is-center="true"
                    @click="handlePriceSelect(item)" class="price-item">
                    <view :class="['price-tag', run.price === item ? 'price-active' : '']">
                        {{ item }}元
                    </view>
                </up-grid-item>
            </up-grid>
            <up-button type="primary" @click="handleCreateTask" class="create-btn">
                创建任务
            </up-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { pubRun } from '../../apis/runAPI';

const run = ref({});
const minDate = new Date(Date.now());
const tempDeadline = ref(new Date());
const priceOptions = ref(['3', '5', '10', '20', '30']);
const show = ref(false);

const handleHistory = () => {
    uni.showModal({
        title: '历史地址',
        content: '暂无历史地址记录',
        showCancel: false
    });
};
const changeHand = () =>{
    if (tempDeadline.value) {
        const selectedDate = new Date(tempDeadline.value);
        run.value.deadline = selectedDate.toISOString();
    }
    show.value = false;
}
const handlePriceSelect = (price : string) => {
    run.value.price = price;
};
const handleCreateTask = () => {
	 const userInfo = uni.getStorageSync('userInfo');
    const userId = userInfo.userId
    run.value.userId = userId
    if (!run.value.typeId) {
        uni.showToast({ title: '请选择任务类型', icon: 'none' });
        return;
    }
    if (!run.value.runDescribe) {
        uni.showToast({ title: '请填写物品信息', icon: 'none' });
        return;
    }
    if (!run.value.endaddress) {
        uni.showToast({ title: '请填写送达地址', icon: 'none' });
        return;
    }
    if (!run.value.deadline || new Date(run.value.deadline) <= new Date()) {
        uni.showToast({ title: '请选择有效的截止时间', icon: 'none' });
        return;
    }
    if (!run.value.price) {
        uni.showToast({ title: '请选择赏金金额', icon: 'none' });
        return;
    }
    const resTitle = ref();
    console.log('提交任务数据:', run.value);
    pubRun(run.value).then((res:any)=>{
        resTitle.value = res.data.code
        console.log(res.data)
    })
    uni.showLoading({ title: '创建中...' });
    setTimeout(() => {
        uni.hideLoading();
        if(resTitle.value === 200){
            uni.showToast({ title: '创建成功', icon: 'success' });
        }else{
            uni.showToast({ title: '创建失败', icon: 'error' });
        }
        run.value = {
            userId: '',
            typeId: '',
            runDescribe: '',
            timeRequire: '',
            endaddress: '',
            code: '',
            phoneEnd: '',
            remark: '',
            price: '',
            deadline:''
        };
    }, 1500);
};
</script>

<style scoped lang="scss">
.content {
    padding: 24rpx 16rpx 40rpx 16rpx;
    background: linear-gradient(135deg, #f8fafc 0%, #e6f7ff 100%);
    min-height: 100vh;
    box-sizing: border-box;
}
.card {
    background: #fff;
    border-radius: 18rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.06);
    margin-bottom: 28rpx;
    padding: 28rpx 20rpx 18rpx 20rpx;
}
.type-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.type-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #07c160;
    margin-bottom: 18rpx;
}
.type-group {
    margin-bottom: 0;
    .type-item {
        margin-right: 32rpx;
        font-size: 30rpx;
    }
}
.form-section {
    margin-bottom: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.form-item {
    margin-bottom: 18rpx;
    &:last-child {
        margin-bottom: 0;
    }
}
.content-input {
    width: 100%;
    min-height: 180rpx;
    font-size: 30rpx;
    line-height: 1.7;
    padding: 16rpx 0;
    background: #f7f8fa;
    border-radius: 8rpx;
    border: 1rpx solid #e5e5e5;
}
.deadline-btn {
    margin-top: 12rpx;
    width: 100%;
    border-radius: 8rpx;
}
.address-section {
    display: flex;
    flex-direction: column;
    .address-input {
        width: 100%;
        background: #f7f8fa;
        border-radius: 8rpx;
        padding: 16rpx;
        border: 1rpx solid #e5e5e5;
    }
    .history-btn {
        align-self: flex-end;
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #07c160;
    }
}
.private-section {
    .private-input {
        background: #f7f8fa;
        border-radius: 8rpx;
        padding: 16rpx;
        border: 1rpx solid #e5e5e5;
    }
}
.price-container {
    margin-top: 0;
    .price-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #ff9800;
        margin-bottom: 8rpx;
        display: block;
    }
    .price-desc {
        color: #999;
        font-size: 26rpx;
        margin-bottom: 18rpx;
        display: block;
    }
    .price-grid {
        margin-bottom: 20rpx;
    }
    .price-item {
        padding: 8rpx;
        &::after {
            border: none;
        }
    }
    .price-tag {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f7f8fa;
        border-radius: 10rpx;
        padding: 12rpx 0;
        font-size: 28rpx;
        border: 2rpx solid #e0e0e0;
        transition: all 0.2s;
    }
    .price-active {
        background: linear-gradient(90deg, #07c160 0%, #34d399 100%);
        color: #fff;
        border: 2rpx solid #07c160;
        box-shadow: 0 2rpx 8rpx 0 rgba(7,193,96,0.08);
    }
    .create-btn {
        border-radius: 12rpx;
        font-size: 32rpx;
        padding: 18rpx 0;
        margin-top: 18rpx;
        letter-spacing: 2rpx;
    }
}
</style>